<template>
	<view>
		<view  class="posiab top0 height800 hidden width1000 posire">
			<view  class="height800 hidden ">
				<image mode="widthFix" class="image" :src="user.user_img?user.user_img:'/static/aaa.png'"></image>
			</view>
			<image  mode="widthFix" class="image posiab bottom " src="/static/img/bying.png"></image>
		</view>
		
		<view class="posire zindex5 ">
			<view class="flex-ju-b pt60 pr50 size22">
				<view @click="back" class="wh60-60 flex-ju-c ra60 ml30" style="background: rgba(0, 0, 0, 0.6);">
					<uni-icons type="back" color="#fff" size="20"></uni-icons>
				</view>
				<view class="flex-a-i">
					<image mode="widthFix" class="image width45 mr20" src="/static/img/xinxin.png"></image>
					<view v-if="user.is_care" class="ibgto-27A752-C6FF00 wh130-48 flex-ju-c ra48">
						<uni-icons type="checkmarkempty" color="#333" size="13"></uni-icons>
						已关注
					</view>
					<view @click="guanzhu" v-else class="ibgto-27A752-C6FF00 wh113-48 flex-ju-c ra48">
						<uni-icons type="plusempty" color="#333" size="13"></uni-icons>
						关注
					</view>
					
				</view>
			</view>
			<view class="flex-ju-c pt20 colorfff">
				<view class="flex-ju-c flex-col ">
					<view class="posire">
						<image class="wh150-150 ra150 biand" :src="user.avatar?user.avatar:'/static/mo.png'"></image>
						<view class="posiab flex-ju-c bgfff wh55-36 ra36 bottom0 right10">
							<image mode="widthFix" class="image width12" src="/static/img/man.png"></image>
						</view>
					</view>
					<view class="size41 mt20">{{user.nickname}}</view>
					<view class="size20 colorccc mt20 ">ID：{{user.uid}}</view>
					<view class="size25 mt20">{{user.mark?user.mark:'未设置'}}</view>
					<view class="flex-a-i center mt50">
						<view @click.stop="navto('otherfocus?index=2&uid='+user.uid)">
							<view>{{user.care_num}}</view>
							<view>关注</view>
						</view>
						<view @click.stop="navto('otherfocus?index=3&uid='+user.uid)" class="mr50 ml50">
							<view>{{user.fans_num}}</view>
							<view>粉丝</view>
						</view>
						<view @click.stop="$refs.upcang.open()">
							<view>{{user.like_num + user.collect_num}}</view>
							<view>点赞和收藏</view>
						</view>
					</view>
						<view class="size25 posire flex-a-i mt50">
							网球水平：
							<view class="height55 hidden flex-col bg3F3D3B border999 color999 ra30 width160">
								<view class="height55 width160 flex-ju-c colorfff center  border-b999">
									{{indexping}}
								</view>
							</view>
						</view>
				</view>
			</view>
	
			
			<view class="bgfff brd mt50 height100 flex-ju-c">
				<view class="flex-a-i bold color999 center">
					<view @click="hometab(1)" :class="{activetxt:tindex==1}" class="mr30">
						笔记
						<view :class="{active:tindex==1}" class="ra7 bgfff wh70-7 mt5"></view>
					</view>
					<view @click="hometab(2)" :class="{activetxt:tindex==2}" class="ml30">
						收藏
						<view :class="{active:tindex==2}" class="ra7 bgfff wh70-7 mt5"></view>
					</view>
					<view @click="hometab(3)" :class="{activetxt:tindex==3}" class="ml30">
						赞过
						<view :class="{active:tindex==3}" class="ra7 bgfff wh70-7 mt5"></view>
					</view>
				</view>
			</view>
			
			<view class="pb15 pl10 pr10">
				<nodata v-if="isdata"></nodata>
				<view class="flex" style="justify-content: space-between;">
					<view>
						<view @click="navto('detail?id='+item.id)" class="bgfff width48vw  mt15 pb15 posire"
							v-for="(item,index) in listleft" :key="index">
							<image mode="widthFix" class="width40 posiab image right15 top15" src="/static/img/bo.png">
							</image>
							<video mode="widthFix" :muted="muted" autoplay :controls="false" :duration="duration" v-if="item.imgs[0].path.endsWith('.mp4')" class="width1000 height350 image" :src="item.imgs[0].path"></video>
							<image mode="widthFix" v-else class="width1000 image" :src="item.imgs[0].path"></image>
							<view class="con ">
								<view class="two  size29 bold mt15 mb15">网球，让你拥有全球视野让你拥有全球视野让你拥有全球视野让你拥有全球视野</view>
								<view class="flex-ju-b color666 size22">
									<view class="flex-a-i">
										<image mode="aspectFill" class="wh35-35 ra35 flex mr10"
											:src="item.user.avatar?item.user.avatar:'/static/mo.png'"></image>
										{{item.user.nickname}}
									</view>
									<view @click="setlike(item)" class="flex-a-i">
										<uni-icons v-if="item.is_like" type="heart-filled" color="#FF1E00" size="17"></uni-icons>
										<uni-icons v-else type="heart" color="#333" size="17"></uni-icons>{{item.like_count}}
									</view>
								</view>
							</view>
						</view>
					</view>
			
					<view>
						<view @click="navto('detail?id='+item.id)" class="bgfff width48vw  mt15 pb15 posire"
							v-for="(item,g) in listright" :key="g">
							<image mode="widthFix" class="width40 posiab image right15 top15" src="/static/img/bo.png">
							</image>
							<video mode="widthFix" :muted="muted" autoplay :controls="false" :duration="duration" v-if="item.imgs[0].path.endsWith('.mp4')" class="width1000 height350 image" :src="item.imgs[0].path"></video>
							<image mode="widthFix" v-else class="width1000 image" :src="item.imgs[0].path"></image>
							<view class="con ">
								<view class="two  size29 bold mt15 mb15">网球，让你拥有全球视野让你拥有全球视野让你拥有全球视野让你拥有全球视野</view>
								<view class="flex-ju-b color666 size22">
									<view class="flex-a-i">
										<image mode="aspectFill" class="wh35-35 ra35 flex mr10"
											:src="item.user.avatar?item.user.avatar:'/static/mo.png'"></image>
										{{item.user.nickname}}
									</view>
									<view @click="setlike(item)" class="flex-a-i">
										<uni-icons v-if="item.is_like" type="heart-filled" color="#FF1E00" size="17"></uni-icons>
										<uni-icons v-else type="heart" color="#333" size="17"></uni-icons>{{item.like_count}}
									</view>
								</view>
							</view>
						</view>
					</view>
			
				</view>
			</view>
			
		</view>
	</view>
	<uni-popup type="center" ref="upcang">
		<view class="bgfff ra20 width480">
			<view class="flex-ju-c flex-col color333 pb30">
				<view class="size34 flex-ju-c bold mt30 pb20 border-bEDEDED width480">获赞和收藏</view>
				<view class="border-bEDEDED pb20">
					<view class="color999  size26 mt20">当前发布笔记数</view>
					<view class="size29 center bold mt10  ">{{user.post_num}}</view>
				</view>
				<view class="border-bEDEDED pb20">
					<view class="color999  size26 mt20">当前获得点赞数</view>
					<view class="size29 center bold mt10  ">{{user.like_num}}</view>
				</view>
				<view class="border-bEDEDED pb20">
					<view class="color999  size26 mt20">当前获得收藏数</view>
					<view class="size29 center bold mt10  ">{{user.collect_num}}</view>
				</view>
				<view @click="$refs.upcang.close()" class="wh350-76 flex-ju-c ra76 bold size29 ibgto-27A752-C6FF00">确认</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				isdata:false,
				tindex:1,
				iskai:false,
				user:"",
				indexping:"",
				listleft: [],
				listright: [],
				page:1,
				other_id:""
			}
		},
		onLoad(option) {
			this.other_id = option.uid
			this.http('/api/userinfo',{
				other_id:option.uid
			}).then(res=>{
				this.user = res.data
				if (res.data.level == 1) {
					this.indexping = '初级阶段'
				} else if (res.data.level == 2) {
					this.indexping = '中级阶段'
				} else if (res.data.level == 3) {
					this.indexping = '高级阶段'
				} else {
					this.indexping = '精英阶段'
				}
			})
			this.getlist(1)
		},
		methods: {
			guanzhu(){
				this.http('/api/add_care/'+this.other_id,{},'post').then(res=>{
					this.user.is_care = true
				})
			},
			hometab(index) {
				this.tindex = index
				this.listright = []
				this.listleft = []
				this.page=1
				this.getlist(index)
			},
			setlike(item){
				if(!item.is_like){
					this.http('/api/post_like/'+item.id,{},'post').then(res=>{
						item.is_like = true
						item.like_count++
					})
				}
			},
			getlist(type){
				this.http('/api/note_list',{type,page:this.page,limit:20,other_id:this.other_id}).then(res => {
					res.data.list.map((item, index) => {
						if (index % 2) {
							this.listright.push(item)
						} else {
							this.listleft.push(item)
						}
					})
					if(this.listleft.length){
						this.isdata = false
					}else{
						this.isdata = true
					}
				})
			},
			gaojis(){
				this.iskai = !this.iskai
			}
			
		}
	}
</script>

<style>
	page{
		background: #F6F7F8;
	}
.biand{
	border:2px solid #fff;
}
.brd{
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}
.active{
		background: #27A752;
	}
	.activetxt{
		color:#333;
	}
	.kaiactive{
		height: auto;
	}
</style>
